<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧排课系统 - 中小学课程编排解决方案</title>
    <script src="3.4.16"></script>
    <link href="font-awesome.min.css" rel="stylesheet">
    <script src="chart.umd.js"></script>
    <script src="Sortable.min.js"></script>
    <!-- 在<head>部分添加 -->
    <script src="auth.js"></script>
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 主色调-蓝色，代表教育与信任
                        secondary: '#10B981', // 辅助色-绿色，代表成长与活力
                        accent: '#F59E0B', // 强调色-橙色，用于重要操作
                        neutral: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .table-cell-hover {
                @apply transition-all duration-200;
            }
            .subject-card {
                @apply bg-white rounded-lg shadow-card p-4 mb-3 cursor-move transition-all duration-300 hover:shadow-hover hover:-translate-y-1;
            }
            .timetable-cell {
                @apply border border-neutral-200 min-h-[100px] p-2 relative bg-white transition-all duration-200;
            }
            .timetable-cell-empty {
                @apply bg-neutral-50 hover:bg-neutral-100 cursor-pointer;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
            }
            .btn-secondary {
                @apply bg-white border border-neutral-300 text-neutral-700 font-medium py-2 px-4 rounded-lg transition-all duration-200 hover:bg-neutral-50;
            }
            .btn-accent {
                @apply bg-accent hover:bg-accent/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
            }
            .form-input {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .form-select {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 appearance-none bg-white;
            }
            .sidebar-item {
                @apply flex items-center px-4 py-3 text-neutral-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
</head>

<body class="bg-neutral-50 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-calendar-check-o text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-neutral-800">智慧排课系统</h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <a href="dashboard.html" class="text-primary font-medium">仪表盘</a>

                    <a href="timetable.html" class="text-neutral-600 hover:text-primary transition-colors">
                        排课管理
                    </a>

                    <a href="courses.html" class="text-neutral-600 hover:text-primary transition-colors">课程管理</a>
                    <a href="teachers.html" class="text-neutral-600 hover:text-primary transition-colors">教师管理</a>
                    <a href="classes.html" class="text-neutral-600 hover:text-primary transition-colors">班级管理</a>
                    <a href="statistics.html" class="text-neutral-600 hover:text-primary transition-colors">统计分析</a>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索..."
                            class="pl-10 pr-4 py-2 rounded-lg border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                    </div>

                    <div class="relative">
                        <button class="flex items-center space-x-2">
                            <img src="40.jpg" alt="用户头像"
                                class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                            <span class="hidden md:inline text-sm font-medium">管理员</span>
                            <i class="fa fa-angle-down text-neutral-400"></i>
                        </button>
                    </div>

                    <button class="md:hidden text-neutral-600">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1">
        <!-- 侧边栏 -->
        <aside
            class="hidden md:block w-64 bg-white shadow-sm h-[calc(100vh-4rem)] sticky top-16 overflow-y-auto transition-all duration-300">
            <div class="p-4">
                <h2 class="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-4">主菜单</h2>

                <nav>
                    <ul class="space-y-1">
                        <li>
                            <a href="dashboard.html" class="sidebar-item sidebar-item-active">
                                <i class="fa fa-tachometer w-5 h-5 text-center mr-3"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="timetable.html" class="sidebar-item">
                                <i class="fa fa-calendar w-5 h-5 text-center mr-3"></i>
                                <span>排课管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="courses.html" class="sidebar-item">
                                <i class="fa fa-book w-5 h-5 text-center mr-3"></i>
                                <span>课程设置</span>
                            </a>
                        </li>
                        <li>
                            <a href="teachers.html" class="sidebar-item">
                                <i class="fa fa-users w-5 h-5 text-center mr-3"></i>
                                <span>教师管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="classes.html" class="sidebar-item">
                                <i class="fa fa-graduation-cap w-5 h-5 text-center mr-3"></i>
                                <span>班级管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="classrooms.html" class="sidebar-item">
                                <i class="fa fa-building w-5 h-5 text-center mr-3"></i>
                                <span>教室管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-bar-chart w-5 h-5 text-center mr-3"></i>
                                <span>统计分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-cog w-5 h-5 text-center mr-3"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="p-4 border-t border-neutral-100">
                <h2 class="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-4">快速访问</h2>
                <nav>
                    <ul class="space-y-1">
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-plus-circle w-5 h-5 text-center mr-3"></i>
                                <span>添加新课程</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-plus-square w-5 h-5 text-center mr-3"></i>
                                <span>添加新教师</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="sidebar-item">
                                <i class="fa fa-plus w-5 h-5 text-center mr-3"></i>
                                <span>添加新班级</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-neutral-50 p-4 md:p-6">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800">排课系统仪表盘</h1>
                <p class="text-neutral-500 mt-1">管理和查看学校课程安排</p>
            </div>

            <!-- 状态卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-primary">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm">总课程数</p>
                            <h3 class="text-2xl font-bold text-neutral-800 mt-1">32</h3>
                            <p class="text-secondary text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 较上周增长 5%
                            </p>
                        </div>
                        <div class="bg-primary/10 p-3 rounded-lg">
                            <i class="fa fa-book text-primary text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-secondary">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm">教师数量</p>
                            <h3 class="text-2xl font-bold text-neutral-800 mt-1">18</h3>
                            <p class="text-secondary text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 较上周增长 2%
                            </p>
                        </div>
                        <div class="bg-secondary/10 p-3 rounded-lg">
                            <i class="fa fa-users text-secondary text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-accent">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm">班级数量</p>
                            <h3 class="text-2xl font-bold text-neutral-800 mt-1">12</h3>
                            <p class="text-secondary text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 较上周增长 1%
                            </p>
                        </div>
                        <div class="bg-accent/10 p-3 rounded-lg">
                            <i class="fa fa-graduation-cap text-accent text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-neutral-600">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm">教室数量</p>
                            <h3 class="text-2xl font-bold text-neutral-800 mt-1">24</h3>
                            <p class="text-neutral-400 text-xs mt-2">
                                <i class="fa fa-minus"></i> 与上周持平
                            </p>
                        </div>
                        <div class="bg-neutral-600/10 p-3 rounded-lg">
                            <i class="fa fa-building text-neutral-600 text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 排课工具和表格 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 排课工具 -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-xl shadow-sm p-5">
                        <h2 class="text-lg font-semibold text-neutral-800 mb-4">排课工具</h2>

                        <div class="mb-4">
                            <label class="block text-sm font-medium text-neutral-700 mb-1">选择年级</label>
                            <select class="form-select">
                                <option>一年级</option>
                                <option>二年级</option>
                                <option>三年级</option>
                                <option>四年级</option>
                                <option>五年级</option>
                                <option>六年级</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="block text-sm font-medium text-neutral-700 mb-1">选择班级</label>
                            <select class="form-select">
                                <option>一年级一班</option>
                                <option>一年级二班</option>
                                <option>一年级三班</option>
                                <option>一年级四班</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="block text-sm font-medium text-neutral-700 mb-1">学期</label>
                            <select class="form-select">
                                <option>2025年上学期</option>
                                <option>2025年下学期</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="block text-sm font-medium text-neutral-700 mb-1">周次</label>
                            <select class="form-select">
                                <option>第1周</option>
                                <option>第2周</option>
                                <option>第3周</option>
                                <option>第4周</option>
                                <option>第5周</option>
                                <option>第6周</option>
                                <option>第7周</option>
                                <option>第8周</option>
                                <option>第9周</option>
                                <option>第10周</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="block text-sm font-medium text-neutral-700 mb-1">可用课程</label>
                            <div class="space-y-2 max-h-60 overflow-y-auto">
                                <div class="subject-card bg-blue-50 border-l-4 border-blue-500">
                                    <div class="flex justify-between items-center">
                                        <div>
                                            <h4 class="font-medium text-blue-800">语文</h4>
                                            <p class="text-xs text-blue-700">张老师</p>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button
                                                class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="subject-card bg-red-50 border-l-4 border-red-500">
                                    <div class="flex justify-between items-center">
                                        <div>
                                            <h4 class="font-medium text-red-800">数学</h4>
                                            <p class="text-xs text-red-700">王老师</p>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button
                                                class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="subject-card bg-yellow-50 border-l-4 border-yellow-500">
                                    <div class="flex justify-between items-center">
                                        <div>
                                            <h4 class="font-medium text-yellow-800">英语</h4>
                                            <p class="text-xs text-yellow-700">李老师</p>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button
                                                class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="subject-card bg-green-50 border-l-4 border-green-500">
                                    <div class="flex justify-between items-center">
                                        <div>
                                            <h4 class="font-medium text-green-800">科学</h4>
                                            <p class="text-xs text-green-700">赵老师</p>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button
                                                class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="subject-card bg-purple-50 border-l-4 border-purple-500">
                                    <div class="flex justify-between items-center">
                                        <div>
                                            <h4 class="font-medium text-purple-800">音乐</h4>
                                            <p class="text-xs text-purple-700">刘老师</p>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button
                                                class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex space-x-2">
                            <button class="btn-primary flex-1">
                                <i class="fa fa-save mr-2"></i>保存课表
                            </button>
                            <button class="btn-accent">
                                <i class="fa fa-magic mr-2"></i>自动排课
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 排课表格 -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-sm p-5">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-lg font-semibold text-neutral-800">一年级一班课表</h2>
                            <div class="flex space-x-2">
                                <button class="btn-secondary text-sm">
                                    <i class="fa fa-print mr-1"></i>打印
                                </button>
                                <button class="btn-secondary text-sm">
                                    <i class="fa fa-download mr-1"></i>导出
                                </button>
                            </div>
                        </div>

                        <div class="overflow-x-auto">
                            <table class="w-full border-collapse">
                                <thead>
                                    <tr>
                                        <th
                                            class="py-3 px-2 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider border-b border-neutral-200">
                                            时段</th>
                                        <th
                                            class="py-3 px-2 text-center text-xs font-medium text-neutral-500 uppercase tracking-wider border-b border-neutral-200">
                                            周一</th>
                                        <th
                                            class="py-3 px-2 text-center text-xs font-medium text-neutral-500 uppercase tracking-wider border-b border-neutral-200">
                                            周二</th>
                                        <th
                                            class="py-3 px-2 text-center text-xs font-medium text-neutral-500 uppercase tracking-wider border-b border-neutral-200">
                                            周三</th>
                                        <th
                                            class="py-3 px-2 text-center text-xs font-medium text-neutral-500 uppercase tracking-wider border-b border-neutral-200">
                                            周四</th>
                                        <th
                                            class="py-3 px-2 text-center text-xs font-medium text-neutral-500 uppercase tracking-wider border-b border-neutral-200">
                                            周五</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td
                                            class="py-2 px-2 text-sm font-medium text-neutral-600 border-b border-neutral-200">
                                            第1节<br>8:30-9:10</td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-blue-50 border-l-4 border-blue-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-blue-800 text-sm">语文</h4>
                                                        <p class="text-xs text-blue-700">张老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-red-50 border-l-4 border-red-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-red-800 text-sm">数学</h4>
                                                        <p class="text-xs text-red-700">王老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-blue-50 border-l-4 border-blue-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-blue-800 text-sm">语文</h4>
                                                        <p class="text-xs text-blue-700">张老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-yellow-50 border-l-4 border-yellow-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-yellow-800 text-sm">英语</h4>
                                                        <p class="text-xs text-yellow-700">李老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-green-50 border-l-4 border-green-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-green-800 text-sm">科学</h4>
                                                        <p class="text-xs text-green-700">赵老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td
                                            class="py-2 px-2 text-sm font-medium text-neutral-600 border-b border-neutral-200">
                                            第2节<br>9:20-10:00</td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-red-50 border-l-4 border-red-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-red-800 text-sm">数学</h4>
                                                        <p class="text-xs text-red-700">王老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-blue-50 border-l-4 border-blue-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-blue-800 text-sm">语文</h4>
                                                        <p class="text-xs text-blue-700">张老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-yellow-50 border-l-4 border-yellow-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-yellow-800 text-sm">英语</h4>
                                                        <p class="text-xs text-yellow-700">李老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-blue-50 border-l-4 border-blue-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-blue-800 text-sm">语文</h4>
                                                        <p class="text-xs text-blue-700">张老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-yellow-50 border-l-4 border-yellow-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-yellow-800 text-sm">英语</h4>
                                                        <p class="text-xs text-yellow-700">李老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td
                                            class="py-2 px-2 text-sm font-medium text-neutral-600 border-b border-neutral-200">
                                            第3节<br>10:20-11:00</td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-yellow-50 border-l-4 border-yellow-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-yellow-800 text-sm">英语</h4>
                                                        <p class="text-xs text-yellow-700">李老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-green-50 border-l-4 border-green-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-green-800 text-sm">科学</h4>
                                                        <p class="text-xs text-green-700">赵老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-red-50 border-l-4 border-red-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-red-800 text-sm">数学</h4>
                                                        <p class="text-xs text-red-700">王老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-red-50 border-l-4 border-red-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-red-800 text-sm">数学</h4>
                                                        <p class="text-xs text-red-700">王老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-blue-50 border-l-4 border-blue-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-blue-800 text-sm">语文</h4>
                                                        <p class="text-xs text-blue-700">张老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td
                                            class="py-2 px-2 text-sm font-medium text-neutral-600 border-b border-neutral-200">
                                            第4节<br>11:10-11:50</td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">音乐</h4>
                                                        <p class="text-xs text-purple-700">刘老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">美术</h4>
                                                        <p class="text-xs text-purple-700">陈老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-green-50 border-l-4 border-green-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-green-800 text-sm">科学</h4>
                                                        <p class="text-xs text-green-700">赵老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">体育</h4>
                                                        <p class="text-xs text-purple-700">黄老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">品德</h4>
                                                        <p class="text-xs text-purple-700">孙老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td
                                            class="py-2 px-2 text-sm font-medium text-neutral-600 border-b border-neutral-200">
                                            第5节<br>14:00-14:40</td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-green-50 border-l-4 border-green-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-green-800 text-sm">科学</h4>
                                                        <p class="text-xs text-green-700">赵老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-green-500 hover:text-green-700 p-1 rounded-full hover:bg-green-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-yellow-50 border-l-4 border-yellow-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-yellow-800 text-sm">英语</h4>
                                                        <p class="text-xs text-yellow-700">李老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-yellow-500 hover:text-yellow-700 p-1 rounded-full hover:bg-yellow-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">体育</h4>
                                                        <p class="text-xs text-purple-700">黄老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-blue-50 border-l-4 border-blue-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-blue-800 text-sm">语文</h4>
                                                        <p class="text-xs text-blue-700">张老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-red-50 border-l-4 border-red-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-red-800 text-sm">数学</h4>
                                                        <p class="text-xs text-red-700">王老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td
                                            class="py-2 px-2 text-sm font-medium text-neutral-600 border-b border-neutral-200">
                                            第6节<br>14:50-15:30</td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-red-50 border-l-4 border-red-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-red-800 text-sm">数学</h4>
                                                        <p class="text-xs text-red-700">王老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">品德</h4>
                                                        <p class="text-xs text-purple-700">孙老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-blue-50 border-l-4 border-blue-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-blue-800 text-sm">语文</h4>
                                                        <p class="text-xs text-blue-700">张老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-blue-500 hover:text-blue-700 p-1 rounded-full hover:bg-blue-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">美术</h4>
                                                        <p class="text-xs text-purple-700">陈老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="timetable-cell timetable-cell-empty">
                                            <div class="subject-card bg-purple-50 border-l-4 border-purple-500 m-1">
                                                <div class="flex justify-between items-center">
                                                    <div>
                                                        <h4 class="font-medium text-purple-800 text-sm">音乐</h4>
                                                        <p class="text-xs text-purple-700">刘老师</p>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button
                                                            class="text-purple-500 hover:text-purple-700 p-1 rounded-full hover:bg-purple-100 transition-colors">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 统计图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h2 class="text-lg font-semibold text-neutral-800 mb-4">课程分布</h2>
                    <div class="h-80">
                        <canvas id="subjectDistribution"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h2 class="text-lg font-semibold text-neutral-800 mb-4">教师工作量</h2>
                    <div class="h-80">
                        <canvas id="teacherWorkload"></canvas>

                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-neutral-800">最近活动</h2>
                    <button class="text-primary text-sm hover:underline">查看全部</button>
                </div>

                <div class="space-y-4">
                    <div class="flex items-start space-x-3 pb-4 border-b border-neutral-100">
                        <div class="bg-blue-100 p-2 rounded-full">
                            <i class="fa fa-calendar-plus-o text-blue-500"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-neutral-800">创建了一年级一班课表</p>
                            <p class="text-xs text-neutral-500">今天 10:25</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-3 pb-4 border-b border-neutral-100">
                        <div class="bg-green-100 p-2 rounded-full">
                            <i class="fa fa-check-circle-o text-green-500"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-neutral-800">一年级二班课表审核通过</p>
                            <p class="text-xs text-neutral-500">今天 09:12</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-3 pb-4 border-b border-neutral-100">
                        <div class="bg-yellow-100 p-2 rounded-full">
                            <i class="fa fa-exclamation-triangle text-yellow-500"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-neutral-800">王老师周五上午有时间冲突</p>
                            <p class="text-xs text-neutral-500">昨天 16:45</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-3 pb-4 border-b border-neutral-100">
                        <div class="bg-purple-100 p-2 rounded-full">
                            <i class="fa fa-user-plus text-purple-500"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-neutral-800">新增了李老师为英语教师</p>
                            <p class="text-xs text-neutral-500">昨天 14:30</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-3">
                        <div class="bg-red-100 p-2 rounded-full">
                            <i class="fa fa-calendar-times-o text-red-500"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-neutral-800">三年级四班课表需要调整</p>
                            <p class="text-xs text-neutral-500">昨天 11:05</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 py-4">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-sm text-neutral-500">&copy; 2025 智慧排课系统 - 中小学课程编排解决方案</p>
                </div>
                <div class="flex space-x-6">
                    <a href="help.html" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-question-circle mr-1"></i>帮助中心
                    </a>
                    <a href="docs.html" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i>使用文档
                    </a>
                    <a href="contact.html" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-envelope-o mr-1"></i>联系我们
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 模态框 -->
    <div id="addSubjectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-lg max-w-md w-full mx-4 p-6 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-neutral-800">添加课程</h3>
                <button id="closeModal" class="text-neutral-400 hover:text-neutral-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>

            <form>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-neutral-700 mb-1">课程名称</label>
                    <input type="text" class="form-input" placeholder="输入课程名称">
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-neutral-700 mb-1">授课教师</label>
                    <select class="form-select">
                        <option>张老师</option>
                        <option>王老师</option>
                        <option>李老师</option>
                        <option>赵老师</option>
                        <option>刘老师</option>
                        <option>陈老师</option>
                        <option>黄老师</option>
                        <option>孙老师</option>
                    </select>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-neutral-700 mb-1">课程类型</label>
                    <select class="form-select">
                        <option>主科</option>
                        <option>副科</option>
                        <option>艺术</option>
                        <option>体育</option>
                        <option>综合</option>
                    </select>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-neutral-700 mb-1">每周课时</label>
                    <input type="number" class="form-input" min="1" max="10" value="4">
                </div>

                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancelAddSubject" class="btn-secondary">取消</button>
                    <button type="submit" class="btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function checkConflicts() {
            const teacherSchedule = {};
            let hasConflict = false;

            document.querySelectorAll('.timetable-cell').forEach(cell => {
                if (cell.querySelector('.subject-card')) {
                    const teacher = cell.querySelector('p').textContent;
                    const position = cell.closest('td').getAttribute('data-position');

                    if (teacherSchedule[teacher] && teacherSchedule[teacher].includes(position)) {
                        cell.style.border = '2px solid red';
                        hasConflict = true;
                    } else {
                        teacherSchedule[teacher] = teacherSchedule[teacher] || [];
                        teacherSchedule[teacher].push(position);
                    }
                }
            });

            if (hasConflict) {
                alert('检测到教师时间冲突！');
            }
        }

        function loadTimetable() {
            const savedData = localStorage.getItem('currentTimetable');
            if (savedData) {
                const timetableData = JSON.parse(savedData);
                const cells = document.querySelectorAll('.timetable-cell');

                timetableData.forEach(item => {
                    if (cells[item.position]) {
                        cells[item.position].innerHTML = `
                            <div class="subject-card bg-${getRandomColor()}-50 border-l-4 border-${getRandomColor()}-500">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <h4 class="font-medium text-${getRandomColor()}-800">${item.subject}</h4>
                                        <p class="text-xs text-${getRandomColor()}-700">${item.teacher}</p>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button class="text-${getRandomColor()}-500 hover:text-${getColor()}-700 p-1 rounded-full hover:bg-${getColor()}-100">
                                            <i class="fa fa-pencil"></i>
                                        </button>
                                        <button class="text-${getRandomColor()}-500 hover:text-${getColor()}-700 p-1 rounded-full hover:bg-${getColor()}-100">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                        cells[item.position].classList.remove('timetable-cell-empty');
                    }
                });
            }
        }

        // 初始化图表
        document.addEventListener('DOMContentLoaded', function () {
            loadTimetable();
            // 初始化拖拽功能
            const subjectCards = document.querySelectorAll('.subject-card');
            const timetableCells = document.querySelectorAll('.timetable-cell');

            subjectCards.forEach(card => {
                card.setAttribute('draggable', 'true');

                card.addEventListener('dragstart', function (e) {
                    e.dataTransfer.setData('text/plain', card.innerHTML);
                    card.classList.add('opacity-50');
                });

                card.addEventListener('dragend', function () {
                    card.classList.remove('opacity-50');
                });
            });

            timetableCells.forEach(cell => {
                cell.addEventListener('dragover', function (e) {
                    e.preventDefault();
                    cell.classList.add('bg-primary/10');
                });

                cell.addEventListener('dragleave', function () {
                    cell.classList.remove('bg-primary/10');
                });

                cell.addEventListener('drop', function (e) {
                    e.preventDefault();
                    cell.classList.remove('bg-primary/10');
                    cell.innerHTML = e.dataTransfer.getData('text/plain');
                    cell.classList.remove('timetable-cell-empty');
                });
            });
            // 课程分布图表
            const subjectCtx = document.getElementById('subjectDistribution').getContext('2d');
            new Chart(subjectCtx, {
                type: 'pie',
                data: {
                    labels: ['语文', '数学', '英语', '科学', '音乐', '美术', '体育', '品德'],
                    datasets: [{
                        data: [20, 18, 15, 12, 8, 8, 10, 9],
                        backgroundColor: [
                            '#3B82F6', '#EF4444', '#F59E0B', '#10B981',
                            '#8B5CF6', '#EC4899', '#06B6D4', '#6366F1'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        title: {
                            display: true,
                            text: '课程分布比例'
                        }
                    }
                }
            });

            // 教师工作量图表
            const teacherCtx = document.getElementById('teacherWorkload').getContext('2d');
            new Chart(teacherCtx, {
                type: 'bar',
                data: {
                    labels: ['张老师', '王老师', '李老师', '赵老师', '刘老师', '陈老师', '黄老师', '孙老师'],
                    datasets: [{
                        label: '周课时',
                        data: [22, 20, 18, 15, 12, 10, 14, 8],
                        backgroundColor: '#3B82F6',
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: '教师周课时统计'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 5
                            }
                        }
                    }
                }
            });

            // 保存课表功能
            function saveTimetable() {
                const timetableData = [];
                document.querySelectorAll('.timetable-cell').forEach((cell, index) => {
                    if (cell.querySelector('.subject-card')) {
                        const subject = cell.querySelector('h4').textContent;
                        const teacher = cell.querySelector('p').textContent;
                        timetableData.push({
                            position: index,
                            subject,
                            teacher
                        });
                    }
                });
                localStorage.setItem('currentTimetable', JSON.stringify(timetableData));
                alert('课表保存成功！');
            }

            // 添加保存按钮事件监听
            document.querySelector('.btn-primary').addEventListener('click', saveTimetable);

            // 模态框控制
            const addButtons = document.querySelectorAll('.fa-plus');
            const modal = document.getElementById('addSubjectModal');
            const closeModal = document.getElementById('closeModal');
            const cancelAddSubject = document.getElementById('cancelAddSubject');

            addButtons.forEach(button => {
                button.addEventListener('click', () => {
                    modal.classList.remove('hidden');
                });
            });

            function hideModal() {
                modal.classList.add('hidden');
            }

            closeModal.addEventListener('click', hideModal);
            cancelAddSubject.addEventListener('click', hideModal);

            // 点击模态框外部关闭
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    hideModal();
                }
            });
        });
    </script>
</body>

</html>